<template>
  <div class="project_box">
    <el-descriptions title="项目基本信息" direction="vertical" :column="5" border>
      <el-descriptions-item label="项目名">{{pro.name}}</el-descriptions-item>
      <el-descriptions-item label="负责人">{{pro.leader}}</el-descriptions-item>
      <el-descriptions-item label="测试任务数">{{tasks.length}}</el-descriptions-item>
      <el-descriptions-item label="项目模块">{{modules.length}}</el-descriptions-item>
      <el-descriptions-item label="项目环境">{{envs.length}}</el-descriptions-item>
    </el-descriptions>
    <el-row :gutter="8" style="margin-top:10px">
      <el-col :span="6">
        <!-- 任务展示 -->
        <TaskList></TaskList>
      </el-col>
      <el-col :span="8">
        <!-- 模块展示 -->
        <ModuleList></ModuleList>
      </el-col>
      <el-col :span="10">
        <!-- 环境展示 -->
        <EnvList></EnvList>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import TaskList from '@/components/projectPage/TaskList'
import ModuleList from '@/components/projectPage/ModuleList'
import EnvList from '@/components/projectPage/EnvList'

export default {
  components: { TaskList, ModuleList, EnvList },
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState(['pro', 'envs', 'modules', 'tasks']),
  },
}
</script>
<style scoped>
.project_box {
  padding: 10px;
}
</style>